<template>
  <div class="_wz_cent_main _wz_transferOwnership">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <div slot="extra">
        <Button type="info" size="small" v-if="!searchType" @click="searchType = true" icon="ios-arrow-down">更多</Button>
        <Button type="info" size="small" v-else @click="searchType = false" icon="ios-arrow-up">收起</Button>
      </div>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="过户类型">
          <i-select v-model.number="formDataSearch.transferType" filterable placeholder="请选择过户类型" clearable>
            <Option :value="1">内转过户</Option>
            <Option :value="2">外转过户</Option>
          </i-select>
        </FormItem>
        <FormItem label="过户方式">
          <i-select v-model="formDataSearch.transferMethodType" filterable placeholder="请选择过户方式" clearable>
            <Option value="1">手续过户</Option>
            <Option value="2">协议过户</Option>
          </i-select>
        </FormItem>
        <FormItem label="过户车型" v-if="searchType">
          <i-select v-model.number="formDataSearch.transferModelType" filterable placeholder="请选择过户车型" clearable>
            <Option :value="1">运输车辆</Option>
            <Option :value="2">货运挂车</Option>
          </i-select>
        </FormItem>
        <FormItem label="原车牌号" v-if="searchType">
          <i-input v-model="formDataSearch.transferVehicleTrailerPlateNo" placeholder="请填写原车牌号" clearable />
        </FormItem>
        <FormItem label="现车牌号" v-if="searchType">
          <i-input v-model="formDataSearch.newVehicleTrailerPlateNo" placeholder="请填写现车牌号" clearable />
        </FormItem>
        <FormItem label="现车主" v-if="searchType">
          <i-input v-model="formDataSearch.newVehicleTrailerOwnerName" placeholder="请填写现车主业户" clearable />
        </FormItem>
        <FormItem label="登记人" v-if="searchType">
          <i-input v-model="formDataSearch.transferRegistrantName" placeholder="请填写登记人" clearable />
        </FormItem>
        <FormItem label="过户时间" v-if="searchType">
          <DatePicker type="daterange" v-model="dateRange" placeholder="请选择到期时间" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem label="运输企业" v-if="searchType">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
        <Button type="success" @click="expireDerive">导出</Button>
      </p>

      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer :title="formTitle" v-model="formOperation" width="1000" :draggable="true" :mask-closable="false" :styles="formOperationStyles" :class-name="drawerClass">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
        <Card :bordered="true" style="margin:0 0 10px;">
          <p slot="title">车辆选择</p>
          <Row>
            <i-col span="8">
              <FormItem label="过户车型" prop="transferModelType">
                <i-select v-model.number="formData.transferModelType" filterable placeholder="请选择过户车型" :label-in-value="true" clearable @on-change="transferModelTypeFun">
                  <Option :value="1">运输车辆</Option>
                  <Option :value="2">货运挂车</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="过户车辆" prop="refVehicleTrailerUuid">
                <i-select v-model="formData.refVehicleTrailerUuid" filterable placeholder="请选择过户车辆" :label-in-value="true" clearable @on-change="refVehicleTrailerUuidFun">
                  <Option v-if="formData.transferModelType == 1" v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.carPlateNo}}</Option>
                  <Option v-if="formData.transferModelType == 2" v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.trailerPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <Card :bordered="true" style="margin:0 0 10px;">
          <p slot="title">过户前数据</p>
          <Row>
            <i-col span="4">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.transferVehicleTrailerDrivingLicenseImg?apiUrl.imgUrl+formData.transferVehicleTrailerDrivingLicenseImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose" />
                </viewer>
              </div>
              <div style="line-height: 30px;text-align: center;">原行驶证照片</div>
            </i-col>
            <i-col span="20">
              <i-col span="12">
                <FormItem label="原车牌号" prop="transferVehicleTrailerPlateNo">
                  <i-input v-model="formData.transferVehicleTrailerPlateNo" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="原车主/业户" prop="transferVehicleTrailerOwnerName">
                  <i-input v-model="formData.transferVehicleTrailerOwnerName" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="原车主电话" prop="transferVehicleTrailerOwnerPhone">
                  <i-input v-model="formData.transferVehicleTrailerOwnerPhone" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="原车辆营运证号" prop="transferVehicleTrailerOperationCertificateNo">
                  <i-input v-model="formData.transferVehicleTrailerOperationCertificateNo" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="车架号" prop="refVehicleTrailerFrameNo">
                  <i-input v-model="formData.refVehicleTrailerFrameNo" placeholder="--" disabled />
                </FormItem>
              </i-col>
<!--              <i-col span="8">-->
<!--                <FormItem label="车型" prop="refVehicleModel">-->
<!--                  <i-input v-model="formData.refVehicleModel" placeholder="&#45;&#45;" disabled />-->
<!--                </FormItem>-->
<!--              </i-col>-->
<!--              <i-col span="8">-->
<!--                <FormItem label="品牌" prop="refVehicleBrand">-->
<!--                  <i-input v-model="formData.refVehicleBrand" placeholder="&#45;&#45;" disabled />-->
<!--                </FormItem>-->
<!--              </i-col>-->
<!--              <i-col span="8">-->
<!--                <FormItem label="排放标准" prop="refVehicleEmissionStandards">-->
<!--                  <i-input v-model="formData.refVehicleEmissionStandards" placeholder="&#45;&#45;" disabled />-->
<!--                </FormItem>-->
<!--              </i-col>-->
<!--              <i-col span="8">-->
<!--                <FormItem label="初登日期" prop="refVehicleDrivingPermitIssueDate">-->
<!--                  <i-input v-model="formData.refVehicleDrivingPermitIssueDate" placeholder="&#45;&#45;" disabled />-->
<!--                </FormItem>-->
<!--              </i-col>-->
            </i-col>
          </Row>
        </Card>

        <Card :bordered="true" style="margin:0 0 10px;">
          <p slot="title">过户后数据 <span style="font-weight: 600;font-size: 12px;color: #f00;margin:0 0 0 20px;">注：外转操作会将原车数据从您的企业内删除，请注意！！！</span>
          </p>
          <Row class="_wz_transferOwnership_formAdd">
            <i-col span="8">
              <FormItem label="过户类型" prop="transferType">
                <i-select v-model.number="formData.transferType" filterable placeholder="请选择过户类型" :label-in-value="true" clearable>
                  <Option :value="1">内转过户</Option>
                  <Option :value="2">外转过户</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8" prop="transferMethodType">
              <FormItem label="过户方式" prop="transferMethodType">
                <i-select v-model="formData.transferMethodType" filterable placeholder="请选择过户方式" clearable>
                  <Option value="1">手续过户</Option>
                  <Option value="2">协议过户</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="办理日期" prop="wzTransferDate">
                <DatePicker type="date" v-model="formData.wzTransferDate" placeholder="请选择办理日期"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="现车主/业户" prop="newVehicleTrailerOwnerName">
                <i-input v-model="formData.newVehicleTrailerOwnerName" placeholder="请填写现车主/业户" clearable />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="现车主电话" prop="newVehicleTrailerOwnerPhone">
                <i-input v-model="formData.newVehicleTrailerOwnerPhone" placeholder="请填写现车主电话" clearable />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="登记人" prop="transferRegistrantName">
                <i-input v-model="formData.transferRegistrantName" placeholder="请填写登记人" clearable />
              </FormItem>
            </i-col>
            <i-col span="8" v-if="formData.transferMethodType == 1">
            <FormItem label="现车牌号" prop="newVehicleTrailerPlateNo">
              <i-input v-model="formData.newVehicleTrailerPlateNo" placeholder="请填写现车牌号" clearable />
            </FormItem>
          </i-col>
            <i-col span="8" v-if="formData.transferMethodType == 1">
              <FormItem label="现营运证号" prop="newVehicleTrailerOperationCertificateNo">
                <i-input v-model="formData.newVehicleTrailerOperationCertificateNo" placeholder="请填写现车辆营运证号" clearable />
              </FormItem>
            </i-col>
            <i-col span="8" v-if="formData.transferMethodType == 1">
              <FormItem label="现登记日期" prop="wzNewVehicleTrailerDrivingPermitIssueDate">
                <DatePicker type="date" v-model="formData.wzNewVehicleTrailerDrivingPermitIssueDate" placeholder="请选择现行驶证登记日期"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="24">
              <i-col span="12">
                <FormItem label="现车辆营运证照" prop="newVehicleTrailerOperationCertificateImg">
                  <Upload name="newVehicleTrailerOperationCertificateImg" :before-upload="newVehicleTrailerOperationCertificateImgFun" action="">
                    <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                  </Upload>
                  <div class="demo-upload-list">
                    <viewer style="width: 100%;height: 100%;" v-if="!!newVehicleTrailerOperationCertificateImg.imgUrl">
                      <img :src="newVehicleTrailerOperationCertificateImg.imgUrl" @error="public.imgDispose">
                    </viewer>
                  </div>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="现行驶证照片" prop="newVehicleTrailerDrivingLicenseImg">
                  <Upload name="newVehicleTrailerDrivingLicenseImg" :before-upload="newVehicleTrailerDrivingLicenseImgFun" action="">
                    <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                  </Upload>
                  <div class="demo-upload-list">
                    <viewer style="width: 100%;height: 100%;" v-if="!!newVehicleTrailerDrivingLicenseImg.imgUrl">
                      <img :src="newVehicleTrailerDrivingLicenseImg.imgUrl" @error="public.imgDispose">
                    </viewer>
                  </div>
                </FormItem>
              </i-col>
            </i-col>
            <i-col span="24">
              <FormItem label="过户资料">
                <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="handleBeforeUpload" multiple>
                  <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                </Upload>
                <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in defaultList">
                    <div class="demo-upload-list">
                      <img :src="item" @error="public.imgDispose">
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
                      </div>
                    </div>
                    <i-input v-model="nameList[index]" placeholder="填写图片名称" clearable />
                  </div>
                </div>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="备注" prop="transferRemark">
                <i-input v-model="formData.transferRemark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
        </div>
      </Form>
    </Drawer>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

    <Drawer title="详情" v-model="formDetails" width="1000" :draggable="true" :mask-closable="false" :styles="{'padding':'10px 10px 10px 10px'}" :class-name="drawerClass">
      <transferOwnershipSeeData v-if="formDetails" :selectData="formDetailsData"></transferOwnershipSeeData>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

  import transferOwnershipSeeData from './transferOwnershipSeeData.vue'
  import wzTbale from "../../../components/table/table";

  export default {
    components: {
      transferOwnershipSeeData,//过户详情
      wzTbale,//列表
    },
    data() {
      return {
        searchType:false,//搜索条件
        spinShow:false,//本页加载
        uploadProgress: 0,//文件上传进度
        subDeptList: [],//运输企业
        dateRange: [],
        formDetailsData: {},//过户详情数据
        formDetails: false,//过户详情
        carList: [],//车和挂车List
        //缩略图展示
        visible: false,
        imgSrc: "",

        drawerClass: "_wz_drawerClass",
        formDataSearch: {},//搜索表单数据

        searchCriteria: {},//点击搜索 从新赋值
        formData: {},//新增修改表单数据
        formOperation: false,//表单左侧移出
        formOperationStyles: {//表单左侧移出css
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },


        tableData: {
          url: this.apiUrl.webApi + "/management/transfer/transferPageList",//请求地址
          method: 'post',//请求方式
          where: {},//搜索条件
          height: 'auto',//表格高度 auto
          page: true,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 80, align: 'center', title: '序号'},
            {title: '档案号', minWidth: 190, key: 'transferRecordNumber'},
            {
              title: '过户类型', minWidth: 140, render: (h, params) => {
                let transferType = params.row.transferType == 1 ? "内转" : "外转";
                let transferMethodType = params.row.transferMethodType == 1 ? "（手续）" : "（协议）";
                return h('span', transferType + transferMethodType);
              }
            },
            {title: '原车牌号', minWidth: 120, key: 'transferVehicleTrailerPlateNo'},
            {title: '现车牌号', minWidth: 120, key: 'newVehicleTrailerPlateNo'},
            {title: '原车主业户', minWidth: 120, key: 'transferVehicleTrailerOwnerName'},
            {title: '现车主业户', minWidth: 120, key: 'newVehicleTrailerOwnerName'},
            {title: '过户时间', minWidth: 120, key: 'transferDate'},
            {title: '登记人', minWidth: 120, key: 'transferRegistrantName'},
            {title: '原运输企业', minWidth: 260, key: 'deptName'},
            {
              title: '操作', width: 120, fixed: 'right',
              render: (h, params) => {

                let operationButtons = [];
                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, '查看'))


                //删除
                if (true) {
                  operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
                  operationButtons.push(h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    on: {
                      click: () => {
                        let that = this;
                        that.$Modal.confirm({
                          title: '删除提醒',
                          content: '确定要删除选中的记录？',
                          onOk: () => {
                            that.spinShow = true;
                            that.axios.post(that.apiUrl.webApi + "/management/transfer/transferDelete", {uuid: params.row.uuid}).then(res => {
                              that.spinShow = false;
                              if (!!res) {
                                that.$Message.success('删除成功');
                                that.$refs.wzTbale.tableLoadData();
                              }
                            }).catch(err => {
                              console.log("失败", err)
                            })
                          },
                          onCancel: () => {
                            //点击取消
                          }
                        });
                      }
                    }
                  }, "删除"))

                }
                return operationButtons;
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
            count: ['count'],//数据总量
          },
        },
        tableLoading: true,//表格加载
        columns2: [//表格表头数据

        ],

        //验证
        ruleValidate: {
          transferModelType: [
            { type: 'number',required: true, message: '请选择过户车型', trigger: ' blur'},
          ],
          refVehicleTrailerUuid: [
            {required: true, message: '请选择过户车辆', trigger: ' blur'},
          ],
          transferType: [
            { type: 'number',required: true, message: '请选择过户车型', trigger: ' blur'},
          ],
          transferMethodType: [
            {required: true, message: '请选择过户资料类型', trigger: ' blur'},
          ],
          wzTransferDate: [//时间正则
            {type: "date", required: true, message: "请选择办理日期", trigger: "blur"}
          ],
          // newVehicleTrailerOwnerName: [
          //   {required: true, message: '请填写现车主/业户', trigger: ' blur'},
          // ],
          // newVehicleTrailerOwnerPhone: [
          //   {required: true, message: '请填写现车主电话号', trigger: ' blur'},
          //   {
          //     validator: (rule, value, callBack) => {
          //       if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
          //         callBack()
          //       } else {
          //         callBack('请输入手机号 或者 区号-座机号')
          //       }
          //     }, trigger: 'blur'
          //   }
          // ],
          transferRegistrantName: [
            {required: true, message: '登记人', trigger: ' blur'},
          ],


          newVehicleTrailerPlateNo: [
            {required: true, message: '请填写现车牌号', trigger: ' blur'},
          ],
          newVehicleTrailerOperationCertificateNo: [
            {required: true, message: '请填写现车辆营运证号', trigger: ' blur'},
          ],
          wzNewVehicleTrailerDrivingPermitIssueDate: [
            {type: "date", required: true, message: "请选择现行驶证登记日期", trigger: "blur"}
          ],
        },
        formTitle: "",//表单名称
        newVehicleTrailerOperationCertificateImg: {//营运证照片
          imgUrl: null
        },
        newVehicleTrailerDrivingLicenseImg: {//现行驶证照片
          imgUrl: null
        },
        defaultList: [],//图片展示数据
        defaultListData: [],//图片表单数据
        nameList: [],//图片名称
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;

      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })


    },
    methods: {//执行的方法
      addTableData() {//table添加
        let that = this;
        that.formTitle = "添加";
        that.formData = {
          wzTransferDate:new Date(),
          transferRegistrantName:JSON.parse(sessionStorage.getItem('loginData')).user.name,
        };
        that.newVehicleTrailerOperationCertificateImg = {//营运证照片
          imgUrl: null
        };
        that.newVehicleTrailerDrivingLicenseImg = {//现行驶证照片
          imgUrl: null
        };
        that.defaultList = [];//图片展示数据
        that.defaultListData = [];//图片表单数据
        that.nameList = [];//图片名称
        that.formOperation = true;
      },
      searchSubmit() {//搜索
        this.formDataSearch.transferStartDate = !!this.dateRange[0] ? this.public.timeFormatting(this.dateRange[0], "yyyy-MM-dd") : '';
        this.formDataSearch.transferEndDate = !!this.dateRange[1] ? this.public.timeFormatting(this.dateRange[1], "yyyy-MM-dd") : '';
        this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
        this.$refs.wzTbale.tableLoadData(true);
      },
      addSubmit(name) {//新增修改提交
        let that = this;
        that.$refs[name].validate((valid) => {
          if (valid) {//正则判断使用
            //提醒
            that.$Modal.confirm({
              title: '过户提醒',
              content: '请确认您所过户的车辆，一经提交，不可修改，请确认信息后再次提交',
              onOk: () => {
                let data = that.formData;
                //办理日期
                data.transferDate = that.public.timeFormatting(data.wzTransferDate, "yyyy-MM-dd");


                //现登记日期
                data.newVehicleTrailerDrivingPermitIssueDate = that.public.timeFormatting(data.wzNewVehicleTrailerDrivingPermitIssueDate, "yyyy-MM-dd");
                let formData = new FormData();

                //过户资料
                that.defaultListData.forEach(function (k, i) {
                  let type = k.name.substr((k.name.lastIndexOf(".") + 1));
                  formData.append('imgList', k, (that.nameList[i].length > 0 ? that.nameList[i] : '图片描述') + '.' + type);
                })

                //现车辆营运证照
                !!that.newVehicleTrailerOperationCertificateImg.data ? formData.append('newVehicleTrailerOperationCertificateImgFile', that.newVehicleTrailerOperationCertificateImg.data) : "";
                //现行驶证照片
                !!that.newVehicleTrailerDrivingLicenseImg.data ? formData.append('newVehicleTrailerDrivingLicenseImgFile', that.newVehicleTrailerDrivingLicenseImg.data) : "";

                for (let key in data) {
                  if (!!data[key]) {
                    formData.append(key, data[key]);
                  }
                }


                that.axios.post(that.apiUrl.webApi + "/management/transfer/transferSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
                  that.$Spin.hide();
                  if (!!res) {
                    that.$Message.success("车辆过户成功");
                    that.formOperation = false;
                    that.$refs.wzTbale.tableLoadData();
                  }
                }).catch(err => {
                  console.log("失败", err)
                })
              },
              onCancel: () => {
                //点击取消
              }
            });
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },
      //营运证照片
      newVehicleTrailerOperationCertificateImgFun(file) {
        let that = this;
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.newVehicleTrailerOperationCertificateImg.imgUrl = window.URL.createObjectURL(file);
          that.newVehicleTrailerOperationCertificateImg.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //行驶证照片
      newVehicleTrailerDrivingLicenseImgFun(file) {
        let that = this;
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          that.newVehicleTrailerDrivingLicenseImg.imgUrl = window.URL.createObjectURL(file);
          that.newVehicleTrailerDrivingLicenseImg.data = file;
        } else {
          that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //新增的时候 处理图片数据
      handleBeforeUpload(file) {
        //如果是文件  就展示文件名
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          this.defaultList.push(window.URL.createObjectURL(file));
          this.defaultListData.push(file);
          this.nameList.push("图片描述");
        } else {
          this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },
      //缩略图查看
      handleView(src) {
        this.imgSrc = src;
        this.visible = true;
      },
      //过户资料删除
      handleRemove(file, index) {//新添加的图片删除
        this.defaultList.splice(index, 1);
        this.defaultListData.splice(index, 1);
        this.nameList.splice(index, 1);
      },
      //过户车型 查询对应的车 还是挂车list
      transferModelTypeFun(e) {
        let that = this;
        if (!!e) {
          if (e.value == 1) {//车辆
            that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehicleList", {}).then(res => {
              that.tableLoading = false;
              if (!!res) {
                that.carList = res.data.data;
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {//挂车
            that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerList",{}).then(res => {
              that.tableLoading = false;
              if (!!res) {
                that.carList = res.data.data;
              }
            }).catch(err => {
              console.log('失败', err);
            })
          }

        } else {//清空数据
          //清空 过户车辆
          that.carList = [];
          //清空 车数据
        }
      },
      //车 挂车 详情
      refVehicleTrailerUuidFun(data) {
        let that = this;
        //清空数据
        that.$set(that.formData, 'transferVehicleTrailerDrivingLicenseImg', '')//原行驶证照片
        that.$set(that.formData, 'transferVehicleTrailerPlateNo', '')//原车牌号
        that.$set(that.formData, 'transferVehicleTrailerOwnerName', '')//原车主/业户
        that.$set(that.formData, 'transferVehicleTrailerOwnerPhone', '')//原车主电话
        that.$set(that.formData, 'transferVehicleTrailerOperationCertificateNo', '')//原车辆营运证号
        that.$set(that.formData, 'refVehicleTrailerFrameNo', '')//车架号

        if (!!data && !!data.value) {
          if (!!!that.formData.newVehicleTrailerPlateNo) {
            that.formData.newVehicleTrailerPlateNo = data.label;
          }

          if (that.formData.transferModelType == 1) {//车辆
            //车辆修改详情
            that.axios.post(that.apiUrl.coreVehicleCoreVehicleInfo,{uuid: data.value}).then(res => {
              if (!!res) {

                that.formData.transferVehicleTrailerDrivingLicenseImg = res.data.data.vehicleLicenseImg;//原行驶证照片
                that.formData.transferVehicleTrailerPlateNo = res.data.data.carPlateNo;//原车牌号
                that.formData.transferVehicleTrailerOwnerName = res.data.data.vehicleOwnerName;//原车主/业户
                that.formData.transferVehicleTrailerOwnerPhone = res.data.data.vehicleOwnerPhone;//原车主电话
                  that.formData.transferVehicleTrailerOperationCertificateNo = res.data.data.vehicleOperationCertificateNo;//原车辆营运证号
                that.formData.refVehicleTrailerFrameNo = res.data.data.frameNo;//车架号
              }
            }).catch(err => {
              console.log("失败", err)
            })
          } else if (that.formData.transferModelType == 2) {//挂车
            //挂车修改详情
            that.spinShow = true;
            that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerInfo" ,{uuid:data.value}).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.formData.transferVehicleTrailerDrivingLicenseImg = res.data.data.trailerLicenseImg;//原行驶证照片
                that.formData.transferVehicleTrailerPlateNo = res.data.data.trailerPlateNo;//原车牌号
                that.formData.transferVehicleTrailerOwnerName = res.data.data.trailerOwnerName;//原车主/业户
                that.formData.transferVehicleTrailerOwnerPhone = res.data.data.trailerOwnerPhone;//原车主电话
                that.formData.transferVehicleTrailerOperationCertificateNo = res.data.data.trailerOperationCertificateNo;//原车辆营运证号
                that.formData.refVehicleTrailerFrameNo = res.data.data.trailerFrameNo;//车架号
              }
            }).catch(err => {
              console.log("失败", err)
            })
          }
        }
      },

      //导出
      expireDerive() {
        let that = this;
        let formDataSearch = JSON.parse(JSON.stringify(this.formDataSearch));
        that.spinShow = true;
        that.axios.post(that.apiUrl.webApi + "/management/transfer/transferExport", formDataSearch).then(res => {
          that.spinShow = false;
          if (!!res) {
            window.open(that.apiUrl.imgUrl + res.data.data)
          }
        }).catch(err => {
          console.log("失败", err)
        })
      },
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_transferOwnership {
    display: flex;
    flex-direction: column;



  }

  ._wz_drawerClass {
    .demo-upload-list {
      margin: auto;
      display: block;
      width: 100px;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        align-items: center;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          margin: auto;
          color: #fff;
          font-size: 40px;
          cursor: pointer;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: flex;
    }


    ._wz_transferOwnership_formAdd {
      .demo-upload-list {
        display: inline-block;
        width: 200px;
        height: 140px;
        text-align: center;
        line-height: 140px;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        border: 1px solid rgba(0, 0, 0, .2);
        margin-right: 4px;

        img {
          width: 100%;
          height: 100%;
        }

        .demo-upload-list-cover {
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, .6);

          i {
            color: #fff;
            font-size: 40px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
      }

      .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
      }
    }
  }
</style>
